<template>
  <div class="prod-box">
    <el-dialog width="1000px" top="5%" title="平台产品" v-model="dialogFormVisible" :close-on-click-modal="false" :draggable="true"
      @close="dialogClose">
      <div class="dialog-content">
        <div class="content-head">
          <span>平台名称：{{ incomingForm.operatorName || '' }}</span>
          <el-button v-show="incomingForm.packageBindShop == 0 || true" style="margin-left:auto;" type="primary" icon="Plus"
            @click="addProd('add',{})">新增产品</el-button>
        </div>
        <div class="table-box">
          <el-table :height="tableHeight" :header-cell-style="{background:'#d6dee5',color:'#000000',fontSize:'14px'}"
            :cell-style="{fontSize:'14px',color:'#7b7b7d'}" :data="tableData" stripe>
            <el-table-column type="index" width="55" label="序号" align="center" />
            <el-table-column prop="packageName" label="产品名称" align="center">
              <template v-slot="scope">
                {{ scope.row.packageName || '' }}
              </template>
            </el-table-column>
            <el-table-column prop="operatorCode" label="平台标识" align="center">
              <template v-slot="scope">
                {{ scope.row.operatorCode || '' }}
              </template>
            </el-table-column>
            <el-table-column prop="otherGoods" label="产品信息" align="center">
              <template v-slot="scope">
                {{ scope.row.otherGoods || '' }}
              </template>
            </el-table-column>
            <el-table-column prop="needPrestore" label="下单时，需要上传预存" align="center">
              <template v-slot="scope">
                {{ scope.row.needPrestore == 0 ? '不必传' : scope.row.needPrestore == 1 ? '必传' : '' }}
              </template>
            </el-table-column>
            <!-- <el-table-column prop="premoneyList" label="预存" align="center" min-width="140">
              <template v-slot="scope">
                <div style="font-size: 12px;" v-for="item in scope.row.premoneyList" :key="item">
                  <div>标题：{{ item.activityTitle }}</div>
                  <div>预存面额：{{ item.showMoney }}元</div>
                  <div>实付金额：{{ item.payMoney }}元</div>
                  <div>活动描述：{{ item.activityMsg }}</div>
                </div>
              </template>
            </el-table-column> -->
            <el-table-column prop="packageDesc" label="产品备注" align="center">
              <template v-slot="scope">
                {{ scope.row.packageDesc || '' }}
              </template>
            </el-table-column>
            <el-table-column prop="descMsg" label="备注信息" align="center">
              <template v-slot="scope">
                {{ scope.row.descMsg || '' }}
              </template>
            </el-table-column>
            <el-table-column label="操作" align="center" width="180">
              <template v-slot="scope">
                <el-link type="primary" @click="addProd('edit',scope.row)">修改</el-link>
                <el-link style="margin-left:5px;" type="danger" @click="deleteHandle(scope.row)">删除</el-link>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogFormVisible = false">关闭</el-button>
        </span>
      </template>
    </el-dialog>
    <add-prod ref="addProdRef" @dialogClose="getPackageList" />
    <confirm-pass ref="confirmPassRef" @verification="deleteSub" />
  </div>
</template>

<script>
import { reactive, ref, toRefs } from 'vue'
import api from '../api'
import { getWindowWidthAndHeight, successDeal, warningDeal } from '@/utils/utils'
import addProd from './addProd.vue'
import confirmPass from '@/components/confirmPass.vue'
export default {
  components: {
    addProd,
    confirmPass,
  },
  setup() {
    const addProdRef = ref(null)
    const confirmPassRef = ref(null)

    const state = reactive({
      tableHeight: 0,
      dialogFormVisible: false,
      deleteId: null,
      incomingForm: {},
      tableData: [],
    })

    function dialogShow(data) {
      let winHeight = getWindowWidthAndHeight()
      state.tableHeight = winHeight.windowHeight - 400
      state.incomingForm = data
      getPackageList()
      state.dialogFormVisible = true
    }

    function getPackageList() {
      const obj = {
        operatorCode: state.incomingForm.operatorCode,
      }
      api.packageList(obj).then(res => {
        if (res.code == '200') {
          state.tableData = res.data.list
        } else {
          warningDeal(res.msg)
        }
      }).catch(err => {
        console.log(err)
      })
    }

    function addProd(type, data) {
      console.log(state.incomingForm)
      addProdRef.value.dialogShow(type, { ...data, ...state.incomingForm })
    }

    function deleteHandle(data) {
      state.deleteId = data.recordId
      const title = '删除产品提示'
      const msg = '是否确认删除产品？'
      confirmPassRef.value.dialogShow(title, msg)
    }

    function deleteSub() {
      const obj = {
        recordId: state.deleteId,
      }
      api.packageDelete(obj).then(res => {
        if (res.code == '200') {
          successDeal(res.msg)
          getPackageList()
        } else {
          warningDeal(res.msg)
        }
      }).catch(err => {
        console.log(err)
      })
    }

    return {
      ...toRefs(state),
      addProdRef,
      confirmPassRef,
      dialogShow,
      addProd,
      getPackageList,
      deleteSub,
      deleteHandle,
    }
  }
}
</script>

<style lang="scss" scoped>
.prod-box {
  .dialog-content {
    .content-head {
      display: flex;
      align-items: center;
    }
    .table-box {
      margin-top: 20px;
    }
  }
}
</style>